<template name="components">
  <view>
    <scroll-view scroll-y class="page">
      <!-- 			<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg">
				<block slot="content">
					<image src="/static/cjkz.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
				</block>
			</cu-custom> -->
      <view class="cu-card">
        <view class="cu-item bg-img shadow-blur" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="toChild"
          :data-url="item.url" v-for="(item,index) in list" :key="index">
          <view class="cardTitle">
            {{item.title}}
          </view>
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: "components",
    data() {
      return {
        StatusBar: this.StatusBar,
        CustomBar: this.CustomBar,
        list: [{
            title: '索引列表',
            img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
            url: '../plugin/indexes'
          },
          {
            title: '微动画',
            img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
            url: '../plugin/animation'
          },
          {
            title: '全屏抽屉',
            img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
            url: '../plugin/drawer'
          },
          {
            title: '垂直导航',
            img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg',
            url: '../plugin/verticalnav'
          }
        ]
      };
    },
    methods: {
      toChild(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.url
        })
      },
    },
  }
</script>

<style>
  .page {
    height: 100vh;
  }

  .cardTitle {
    color: #fff;
    padding: 90upx 60upx;
    font-size: 40upx;
    font-weight: 300;
    transform: skew(-10deg, 0deg);
    position: relative;
    text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
  }

  .cardTitle::before {
    content: "";
    position: absolute;
    width: 60upx;
    height: 6upx;
    border-radius: 20upx;
    background-color: #fff;
    display: block;
    top: 60upx;
    left: 50upx;
    transform: skew(10deg, 0deg);
  }

  .cardTitle::after {
    content: "";
    position: absolute;
    width: 140upx;
    border-radius: 6upx;
    height: 24upx;
    background-color: #fff;
    display: block;
    bottom: 76upx;
    left: 90upx;
    transform: skew(10deg, 0deg);
    opacity: 0.1;
  }
</style>